<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>编程式的导航</title>
    <script src="../../vue.js"></script>
    <script src="../../vue-router.js"></script>

    <style>
        #app h2{
            cursor: pointer
        }
    </style>
</head>

<body>
    <div id="app">
        <h1>我是标题</h1>
        <h2 @click="goto">router.push</h2>
        <h2 @click="goto2">router.replace</h2>

        <router-view></router-view>

    </div>
    <script>

        const Loac = {
            template: '<p>编程式入口</p>'
        }
        const Loac2 = {
            template: '<p>编程式入口二</p>'
        }
        /*

        */
        const router = new VueRouter({
            routes: [
                {path:'/loac',component:Loac},
                {path:'/loac2',component:Loac2},
            ]
        });
        const app = new Vue({
            methods: {
               
                goto:function(){
                     //这个方法会向 history 栈添加一个新的记录，
                //所以，当用户点击浏览器后退按钮时，则回到之前的 URL。
                    router.push('/loac')
                },
                goto2:function(){
                    //它不会向 history 添加新记录，而是跟它的
                    //方法名一样 —— 替换掉当前的 history 记录。
                    router.replace('/Loac2')
                }
            },
            router

        }).$mount('#app')
    </script>
</body>

</html>